<template>
	<div class="center_bottom">
		<Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
	</div>
</template>

<script>
	import {
		currentGET
	} from 'api/modules'
	import station from './station.js';
	export default {
		data() {
			return {
				options: {},
				pageflag: false,
				stationId: 5605,
			};
		},
		props: {},
		created() {
			this.getData()
			station.$on('stationId', val => {
				this.stationId = val;
				this.options = {};
				this.getData();
			})
		},
		mounted() {},
		beforeDestroy() {
			station.$off('stationId');
		},
		methods: {
			getData() {
				currentGET("soil", {
					stationId: this.stationId
				}).then((res) => {
					if (res.flag) {
						this.pageflag = true;
						this.init(res.data.xData, res.data.yData, res.data.yData2, res.data.yData3);
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			init(xData, yData, yData2, yData3) {
				const colors = ['#5470C6', '#91CC75', '#EE6666'];
				this.options = {
					color: colors,
					tooltip: {
						trigger: 'axis',
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						//布局
						show: true,
						left: "10px",
						right: "80px",
						bottom: "20px",
						top: "38px",
						containLabel: true,
						borderColor: "#1F63A3",
					},
					legend: {
						data: ['土壤温度', '土壤水分', '土壤氧气'],
						textStyle: {
							color: '#fff'
						}
					},
					xAxis: [{
						type: 'category',
						boundaryGap: true, // 不留白，从原点开始
						axisTick: {
							alignWithLabel: true
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
						data: xData
					}],
					yAxis: [{
							type: 'value',
							name: '土壤水分',
							position: 'right',
							alignTicks: true,
							splitLine: {
								show: true,
								lineStyle: {
									color: "rgba(31,99,163,.2)",
								},
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: colors[0]
								}
							},
							axisLabel: {
								formatter: '{value} %'
							}
						},
						{
							type: 'value',
							name: '土壤氧气',
							position: 'right',
							alignTicks: true,
							offset: 80,
							splitLine: {
								show: true,
								lineStyle: {
									color: "rgba(31,99,163,.2)",
								},
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: colors[1]
								}
							},
							axisLabel: {
								formatter: '{value} g/kg'
							}
						},
						{
							type: 'value',
							name: '土壤温度',
							position: 'left',
							alignTicks: true,
							splitLine: {
								show: true,
								lineStyle: {
									color: "rgba(31,99,163,.2)",
								},
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: colors[2]
								}
							},
							axisLabel: {
								formatter: '{value} °C'
							}
						}
					],
					series: [{
							name: '土壤水分',
							type: 'bar',
							data: yData3
						},
						{
							name: '土壤氧气',
							type: 'bar',
							yAxisIndex: 1,
							data: yData
						},
						{
							name: '土壤温度',
							type: 'line',
							yAxisIndex: 2,
							data: yData2
						}
					]
				};
			},
		},
	};
</script>
<style lang="scss" scoped>
	.center_bottom {
		width: 100%;
		height: 100%;

		.echarts_bottom {
			width: 100%;
			height: 100%;
		}
	}
</style>
